<div id="main-content">
<div class="box border green">
    <div class="box-title">
        <h4>
            <i ng-show="!fresh" class="fa fa-book"></i>
            <a ng-click="back()" data-toggle="tooltip" title="返回">
                <i class="fa  fa-arrow-left" ng-show="fresh"></i>
            </a>
            联系人列表
            <span ng-if="chevronLeft||chevronRight">>>{{presentContactInfo.baseInfo.name}}</span>
            <span ng-if="addHint">>>新建联系人</span>
            <span ng-if="addHint&&addContactInfo.baseInfo.name!=''&&addContactInfo.baseInfo.name!=undefined">：{{addContactInfo.baseInfo.name}}</span>
        </h4>
        <!--tools-->
        <div class="tools">
            <button type="file"  ngf-select="upExcel($file)" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" ngf-max-height="1000" ngf-max-size="10MB" class="btn btn-info btn-xs">
                <span>导入</span>
                <i class="fa fa-upload"></i>
            </button>
            <button class="btn btn-xs btn-info" ng-click="downExcel()">
                <span>导出</span>
                <i class="fa fa-download"></i>
            </button>
            <a ng-click="addBase()" ng-show="plus" data-toggle="tooltip" title="新建">
                <i class="fa fa-plus"></i>
            </a>
            <a ng-click="hideAllDetail()" ng-show="folder" data-toggle="tooltip" title="折叠/展开">
                <i class="fa fa-folder-open-o"></i>
            </a>
            <!--<a ng-click="saveInfo()" ng-show="check" data-toggle="tooltip" title="保存">
                <i class="fa fa-upload"></i>
            </a>-->
            <a ng-click="display(1);" ng-show="chevronDown" style="display: inline" data-toggle="tooltip" title="更多信息">
                <i class="fa fa-chevron-down"></i>
            </a>
            <a ng-click="display(2);" ng-show="chevronUp" style="display: inline;" data-toggle="tooltip" title="隐藏更多">
                <i class="fa fa-chevron-up"></i>
            </a>
            <a ng-click="display(3)" ng-show="chevronLeft" style="display: inline;" data-toggle="tooltip" title="显示隐藏模块">
                <i class="fa fa-chevron-left"></i>
            </a>
            <a ng-click="display(4)" ng-show="chevronRight" style="display: inline;" data-toggle="tooltip" title="隐藏模块列表">
                <i class="fa fa-chevron-right"></i>
            </a>
            <a ng-click="phoneDiv=true" ng-show="chevronRight&&!phoneDiv" style="display: inline;" data-toggle="tooltip" title="电话">
                <i class="fa fa-phone"></i>
            </a>
            <a ng-click="businessDiv=true" ng-show="chevronRight&&!businessDiv" style="display: inline;" data-toggle="tooltip" title="商业">
                <i class="fa fa-jpy"></i>
            </a>
            <a ng-click="employeeDiv=true" ng-show="chevronRight&&!employeeDiv" style="display: inline;" data-toggle="tooltip" title="雇佣">
                <i class="fa fa-chain"></i>
            </a>
            <a ng-click="personalityDiv=true" ng-show="chevronRight&&!personalityDiv" style="display: inline;" data-toggle="tooltip" title="私人">
                <i class="fa fa-male"></i>
            </a>
            <a ng-click="emailDiv=true" ng-show="chevronRight&&!emailDiv" style="display: inline;" data-toggle="tooltip" title="邮件">
                <i class="fa fa-envelope"></i>
            </a>
            <a ng-click="fixDiv=true" ng-show="chevronRight&&!fixDiv" style="display: inline;" data-toggle="tooltip" title="传真">
                <i class="fa fa-fax"></i>
            </a>
            <a ng-click="addresssDiv=true" ng-show="chevronRight&&!addresssDiv" style="display: inline;" data-toggle="tooltip" title="地址">
                <i class="fa fa-home"></i>
            </a>
            <a ng-click="educationHistorysDiv=true" ng-show="chevronRight&&!educationHistorysDiv" style="display: inline;" data-toggle="tooltip" title="教育经历">
                <i class="fa fa-book"></i>
            </a>
            <a ng-click="workHistorysDiv=true" ng-show="chevronRight&&!workHistorysDiv" style="display: inline;" data-toggle="tooltip" title="工作经历">
                <i class="fa fa-edit"></i>
            </a>
            <a ng-click="familyInfosDiv=true" ng-show="chevronRight&&!familyInfosDiv" style="display: inline;" data-toggle="tooltip" title="家庭">
                <i class="fa fa-heart"></i>
            </a>
            <a ng-click="refresh(1)" style="display: inline;" data-toggle="tooltip" title="刷新">
                <i class="fa fa-refresh"></i>
            </a>
        </div>
    </div>
    <div class="box-body">
        <div class="row">
            <!--联系人列表-->
            <div class="col-md-3">
                <div id="address-book">
                    <div class="slider-content" style="height:480px;overflow:auto">
                        <!--联系人列表功能模块-->
                        <div class="row" >
                            <div class="col-md-8" style="padding-right:0">
                                <input class="form-control" type="text" ng-model="filterInfos.name">
                            </div>
                            <div class="col-md-4" style="padding-left:0;padding-top: 7px;padding-bottom: 7px">
                                <button class="btn btn-xs btn-info" ng-init="search=false" ng-click="search=!search">
                                    <i class="fa fa-search fa-lg" data-toggle="tooltip" title="检索"></i>
                                    高级检索
                                </button>
                            </div>
                            <!--
                            <div class="col-md-1 {{search?'no-padding':''}}">
                                <i class="fa fa-download fa-lg" ng-click="search=false" data-toggle="tooltip" title="导入/导出"></i>
                            </div>
                            <div class="col-md-8" ng-show="!search" style="padding-left:0">
                                <div class="row">
                                    <div class="col-md-6" style="padding-right:0">
                                        <button type="file"  ngf-select="upExcel($file)" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" ngf-max-height="1000" ngf-max-size="10MB" class="btn btn-primary">
                                            <span>导入</span>
                                            <i class="fa fa-upload"></i>
                                        </button>
                                    </div>
                                    <div class="col-md-6" style="padding-left:0">
                                        <button class="btn btn-primary" ng-click="downExcel()">
                                            <span>导出</span>
                                            <i class="fa fa-download"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-1 no-padding-left" ng-show="!search">
                                <i class="fa fa-search fa-lg" ng-click="search=true" data-toggle="tooltip" title="检索"></i>
                            </div>-->
                         </div>
                        <style>
                            .angular-animate-fade{
                                position:absolute;
                                background-color:gainsboro
                            }
                            .angular-animate-fade.ng-enter {
                                transition:0.5s linear all!important;
                                -webkit-transition:0.5s linear all!important ;
                                opacity:0!important;
                            }
                            .angular-animate-fade.ng-enter.ng-enter-active {
                                opacity:1!important;
                            }
                            .angular-animate-fade.ng-leave {
                                transition:0.5s linear all!important;
                                -webkit-transition:0.5s linear all!important ;
                                opacity:1!important;
                            }
                            .angular-animate-fade.ng-leave.ng-leave-active {
                                opacity:0!important;
                            }
                        </style>
                        <div ng-if="search" class="angular-animate-fade">
                            商业联系:<br>
                            <div class="btn-group" >
                                <a class="btn btn-xs btn-{{filterInfos.one.a?'success':'default'}}" ng-click="filterInfos.one.a=!filterInfos.one.a">客户</a>
                                <a class="btn btn-xs btn-{{filterInfos.one.b?'success':'default'}}" ng-click="filterInfos.one.b=!filterInfos.one.b">合作伙伴</a>
                                <a class="btn btn-xs btn-{{filterInfos.one.c?'success':'default'}}" ng-click="filterInfos.one.c=!filterInfos.one.c">竞争对手</a>
                                <a class="btn btn-xs btn-{{filterInfos.one.d?'success':'default'}}" ng-click="filterInfos.one.d=!filterInfos.one.d">供应商</a>
                                <a class="btn btn-xs btn-{{filterInfos.one.e?'success':'default'}}" ng-click="filterInfos.one.e=!filterInfos.one.e">其他</a>
                            </div>
                            <br>
                            重要程度:<br>
                            <div class="btn-group" >
                                <a class="btn btn-xs btn-{{filterInfos.two.a?'success':'default'}}" ng-click="filterInfos.two.a=!filterInfos.two.a">不需要</a>
                                <a class="btn btn-xs btn-{{filterInfos.two.b?'success':'default'}}" ng-click="filterInfos.two.b=!filterInfos.two.b">需要</a>
                                <a class="btn btn-xs btn-{{filterInfos.two.c?'success':'default'}}" ng-click="filterInfos.two.c=!filterInfos.two.c">重要</a>
                                <a class="btn btn-xs btn-{{filterInfos.two.d?'success':'default'}}" ng-click="filterInfos.two.d=!filterInfos.two.d">很重要</a>
                                <a class="btn btn-xs btn-{{filterInfos.two.e?'success':'default'}}" ng-click="filterInfos.two.e=!filterInfos.two.e">极其重要</a>
                            </div>
                            <br>
                            友好程度:<br>
                            <div class="btn-group" >
                                <a class="btn btn-xs btn-{{filterInfos.three.a?'success':'default'}}" ng-click="filterInfos.three.a=!filterInfos.three.a">讨厌</a>
                                <a class="btn btn-xs btn-{{filterInfos.three.b?'success':'default'}}" ng-click="filterInfos.three.b=!filterInfos.three.b">烦</a>
                                <a class="btn btn-xs btn-{{filterInfos.three.c?'success':'default'}}" ng-click="filterInfos.three.c=!filterInfos.three.c">认识</a>
                                <a class="btn btn-xs btn-{{filterInfos.three.d?'success':'default'}}" ng-click="filterInfos.three.d=!filterInfos.three.d">接受</a>
                                <a class="btn btn-xs btn-{{filterInfos.three.e?'success':'default'}}" ng-click="filterInfos.three.e=!filterInfos.three.e">好感</a>
                            </div>
                            <br>
                            <br>
                            <div class="btn-group">
                                <button class="btn btn-xs btn-default" ng-click="clearFilter()">清空筛选条件</button>
                                <button class="btn btn-xs btn-default" ng-click="search=false">隐藏筛选框</button>
                                <button class="btn btn-xs btn-default" ng-click="clearFilter();search=false">清空筛选条件</button>
                            </div>
                        </div>
                        <!--contact table is here-->
                        <table id="example-stats" class="table table-stats table-condensed table-striped table-sortable">
                            <thead>
                            <tr>
                                <th class="headerSortable"></th>
                                <th class="headerSortable headerSortUp">Name</th>
                                <th class="headerSortable">Phone</th>
                                <th class="headerSortable"></th>
                                <!--<th class="headerSortable">  </th>-->
                            </tr>
                            </thead>
                            <tbody>
                                <tr class="ss_tr_odd" ng-init="showTrash[$index]=false" ng-mouseover="showTrash[$index]=true" ng-mouseleave="showTrash[$index]=false" ng-repeat="item in contactBaseInfos|filter:infosFilter" ng-style="getImportance(item.personalityInfo)" data-toggle="tooltip" title="{{getImportanceTip(item.personalityInfo)}}">
                                    <td ng-click="changedetail(item.id)"><span ng-show="presentContactInfo.id==item.id"><i class="fa fa-star"></i></span></td>
                                    <td ng-click="changedetail(item.id)">{{item.baseInfo.name}}</td>
                                    <td ng-click="changedetail(item.id)"><i >{{item.baseInfo.mobileNumberList[0].value}}</i></td>
                                    <td><a style="float: right" ng-show="showTrash[$index]" ng-click="delete(item.id)"><i class="fa fa-trash-o"></i></a></td>
                                </tr>
                            </tbody>
                        </table>
                        <!--content over-->
                    </div>
                </div>
            </div>
            <!--联系人详细信息 通过ui-router显示-->
            <div class="col-md-9">
                <div data-ui-view="contactdetailcontent"></div>
            </div>
        </div>
    </div>
</div>
</div>
